<template>
  <div class="manage-info-container scroll-box">
    <div>
      <div class="search-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            show-action
            shape="round"
            placeholder="搜索设备编号"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleSearch"
          >
            <template #action>
              <div></div>
            </template>
          </van-search>
        </form>
      </div>
      <div class="big-filter-box">
        <van-dropdown-menu box-shadow="0 0 0 0 ">
          <van-dropdown-item @change="getValue" default="全部状态" v-model="value1" :options="option1" />
        </van-dropdown-menu>
        <div class="timeDrop">
          <span @click="getStartTime"><i class="iconfont iconrili"></i> {{ startTime }}</span> -
          <span @click="getEndTime">{{ endTime }}</span>
        </div>
      </div>
      <div
        class="stay-whole-box"
        v-for="(item, index) in tableList"
        :key="index"
        @click="onOpenWorkOrderManageDetail(item.id, item.status, item.orderId)"
      >
        <div class="stay-whole-work-box">
          <div class="stay-whole-work-icon-box">
            <i class="iconfont iconbaoyangtongzhi stay-whole-icon-color"></i>
          </div>

          <div class="stay-whole-reight">
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-left" :title="item.planName">{{ item.planName }}</p>
              <div class="stay-whole-reight-text-reight" v-if="item.status === 2">
                <div class="whole-work-state-icon-box-wait">
                  <i class="iconfont icondaichuli whole-work-state-icon-color"></i>
                </div>
                待处理
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 5">
                <div class="whole-work-state-icon-box-complete">
                  <i class="iconfont icontianjiawancheng whole-work-state-icon-color"></i>
                </div>
                已完成
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 3">
                <div class="whole-work-state-icon-box-processing">
                  <i class="iconfont iconchulizhong whole-work-state-icon-color"></i>
                </div>
                处理中
              </div>
            </div>
            <p class="stay-reight-text-bootem"></p>
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-bootem-reason">设备编号：{{ item.deviceNumber }}</p>
            </div>
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-bootem-explain">通知时间：{{ item.time }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <SearchFilter v-show="showFilterDevice" @submit="submitFilter" />
    <van-popup
      v-model="timeShow"
      class="timePop"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <van-datetime-picker
        cancel-button-text="清除"
        v-model="currentDate"
        type="datehour"
        title="选择年月日小时"
        @confirm="getTime"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script>
import SearchFilter from '../components/SearchFilterAlarm.vue';
import { getPlanList } from '@/api/maintenanceNotice';
import {
  Tab,
  Tabs,
  Search,
  Button,
  Dialog,
  Tag,
  Cell,
  CellGroup,
  DropdownMenu,
  DropdownItem,
  DatetimePicker,
  Popup
} from 'vant';
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Tag.name]: Tag,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    SearchFilter
  },
  data() {
    return {
      active: 0,
      searchOptions: {
        searchKey: '',
        handleSearch: this.handleSearch,
        handleFilter: this.handleFilter
      },
      showFilterDevice: false,
      tag: 1,
      option1: [
        { text: '全部状态', value: '' },
        { text: '待处理', value: 2 },
        { text: '处理中', value: 3 },
        { text: '已完成', value: 5 }
      ],
      value1: '',
      startTime: new Date().Format('yyyy') + '/01/01',
      endTime: new Date().Format('yyyy/MM/dd'),
      beginTime: new Date().Format('yyyy') + '-01-01 00:00:00', //传输的开始结束时间
      endTime2: new Date().Format('yyyy-MM-dd') + ' 23:59:59',
      timeShow: false,
      currentDate: new Date(),
      tableList: [],
      status: ''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索
    handleSearch() {
      console.log('handleSearch---', this.searchOptions.searchKey);
      this.getList();
    },
    getValue(value) {
      console.log(value);
      this.status = value;
      this.getList();
    },
    // 筛选
    handleFilter() {
      console.log('handleFilter');
      this.showFilterDevice = true;
    },
    // 确定筛选条件
    submitFilter() {
      this.showFilterDevice = false;
    },
    //获取列表
    getList() {
      let startTime = this.beginTime !== '开始时间' ? this.beginTime : '';
      let endTime = this.endTime !== '结束时间' ? this.endTime2 : '';
      getPlanList({
        page: 1,
        page_size: 999,
        keyword: this.searchOptions.searchKey,
        beginTime: startTime,
        endTime: endTime,
        status: this.status
      }).then(res => {
        console.log(res);

        res.data.list.forEach(item => {
          item.time = new Date(item.time).Format('yyyy/MM/dd hh:mm:ss');
        });
        this.tableList = res.data.list;
      });
    },
    //跳转详情页面
    onOpenWorkOrderManageDetail(id, status, orderId) {
      if (this.$checkBtnPermission('maintenanceCenter:maintenanceNotice:list:detail')) {
        if (status === 2) {
          this.$router.push({
            name: 'maintenanceNoticeDetail',
            query: {
              id: id
            }
          });
        } else {
          this.$router.push({
            name: 'maintNoticeWorkDetail',
            query: {
              id: orderId
            }
          });
        }
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    },
    getStartTime() {
      this.timeShow = true;
      this.tag = 1;
    },
    getEndTime() {
      this.timeShow = true;
      this.tag = 2;
    },
    getTime(value) {
      this.timeShow = false;
      if (this.tag === 1) {
        this.startTime = new Date(value).Format('yyyy/MM/dd');
        this.beginTime = new Date(value).Format('yyyy-MM-dd hh:mm:ss');
      } else {
        this.endTime = new Date(value).Format('yyyy/MM/dd ');
        this.endTime2 = new Date(value).Format('yyyy-MM-dd hh:mm:ss');
      }

      this.getList();
    },
    cancel() {
      if (this.tag === 1) {
        this.startTime = '开始时间';
        this.beginTime = '';
      } else {
        this.endTime = '结束时间';
        this.endTime2 = '';
      }

      this.timeShow = false;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .van-dropdown-item__option--active {
  color: var(--color-primary) !important;
  .van-dropdown-item__icon {
    color: var(--color-primary) !important;
  }
}
::v-deep .van-dropdown-menu__title--active {
  color: var(--color-black);
}
</style>
<style lang="scss" scoped>
.manage-info-container {
  width: 100%;
  height: 100%;
}

//筛选
.search-box {
  width: 100%;
  height: 1.6rem;
  // margin-bottom: 0.213333rem;
  // padding: 0.4rem 0.426667rem;
  background-color: #fff;
  border-top: 1px solid #f2f6fc;
}

::v-deep .van-dropdown-menu__bar {
  box-shadow: unset !important;
}
.big-filter-box {
  display: flex;
  padding-top: 0;
  padding-bottom: 0.266667rem;
  font-size: 0.373333rem;
  color: #666666;
  width: 100%;
  .van-dropdown-menu {
    flex: 1;
  }
  .timeDrop {
    flex: 2;
    background-color: #fff;
    text-align: center;
    line-height: 1.28rem;
  }
  .van-dropdown-menu > .van-dropdown-menu__bar {
    box-shadow: unset !important;
  }
}
//全部工单
.stay-whole-box {
  width: 100%;
  // height: 2.613333rem;
  margin-bottom: 0.213333rem;
  padding: 0.4rem 0.426667rem;
  background-color: #fff;
  .stay-whole-work-box {
    display: flex;
  }
  .stay-whole-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: rgb(248, 238, 255);
    border-radius: 0.8rem;
    text-align: center;

    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-green-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: rgb(240, 249, 235);
    border-radius: 0.8rem;
    text-align: center;

    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-whole-icon-color {
    color: rgb(127, 82, 223);
    font-size: 0.533333rem;
  }
  .stay-green-icon-color {
    color: var(--color-green);
    font-size: 0.533333rem;
  }
  .stay-whole-reight {
    width: 7.733333rem;
    position: relative;
    padding-left: 0.32rem;
  }
  .stay-whole-reight:before {
    content: '';
    position: absolute;
    top: -0.026667rem;
    left: 0;
    width: 1px;
    height: 90%;
    background-color: #f2f6fc;
  }

  .stay-whole-reight-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    van-tag {
      border: 0.026667rem solid #85aeff;
      padding: 0.053333rem 0.106667rem;
      border-radius: 0.053333rem;
    }
  }
  .stay-whole-reight-text-left {
    font-size: 0.4rem;
    color: rgb(51, 51, 51);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stay-whole-reight-text-reight {
    font-size: 0.32rem;
    color: #999999;
    display: flex;
    white-space: nowrap;
  }
  .whole-work-state-icon-box-wait {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(255, 195, 41);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-complete {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(129, 228, 169);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-processing {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(118, 182, 255);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-color {
    color: #fff;
    font-size: 0.32rem;
  }

  .stay-reight-text-bootem {
    font-size: 0.346667rem;
    color: #666666;
    margin-top: 0.32rem;
    margin-bottom: 0.32rem;
  }
  .stay-whole-reight-text-bootem {
    font-size: 0.32rem;
    color: #999999;
  }
  .stay-whole-reight-text-bootem-reason {
    color: rgb(102, 102, 102);
    font-size: 0.32rem;
  }
  .stay-whole-reight-text-bootem-explain {
    color: rgb(102, 102, 102);
    font-size: 0.36rem;
  }
  .stay-icon-color-green {
    color: #67c23a !important;
  }
  .stay-work-icon-box-green {
    background: #f0f9eb !important;
  }
}

//弹出时间
</style>
